{% use "utils.twig" %}

    {% if num_charts == 0 %}
        {% if current.folder %}
            <h3 class="no-charts">{{ "mycharts / empty-folder" | trans | replace({'%location%':['?folder=',current.folder]|join }) | raw }}</h3>
        {% elseif current.organization %}
            <h3 class="no-charts">{{ "mycharts / empty-folder" | trans | replace({'%location%':['?team=',current.organization]|join }) | raw }}</h3>
        {% else %}
            <h3 class="no-charts">{{ "mycharts / empty-folder" | trans | replace({'%location%':'' }) | raw }}</h3>
        {% endif %}
    {% else %}
        <div style="margin-bottom:10px; padding:10px;font-weight:300">
            <i style="color:#999" class="im im-plus-circle im-fw"></i>
            <span style="margin-left: 3px;">
            {% if current.folder %}
                {{ "mycharts / create-chart-here" | trans | replace({'%location%':['?folder=',current.folder]|join }) | raw }}
            {% elseif current.organization %}
                {{ "mycharts / create-chart-here" | trans | replace({'%location%':['?team=',current.organization]|join }) | raw }}
            {% else %}
                {{ "mycharts / create-chart-here" | trans | replace({'%location%':'' }) | raw }}
            {% endif %}
            </span>
        </div>
    {% endif %}

    {% for group in chart_groups %}
        {% if group.title %}
            <h3 id="group-{{ group.id }}">{% if group.link %}<a href="{{ group.link }}">{% endif %}{{ group.title }}{% if group.link %}</a>{% endif %}</h3>
        {% endif %}

        <ul class="thumbnails">
            {% for chart in group.charts %}

            <li class="span2 chart" data-id="{{ chart.id }}">

                <div class="thumbnail" data-id="{{ chart.id }}">

                    <a class="popup" href="/chart/{{ chart.id }}/edit">
                        {% if organization_settings[chart.organizationId] and organization_settings[chart.organizationId].displayLocale %}
                            <span class="locale">{{ chart.language }}</span>
                        {% endif %}

                        <div class="image" style="width:100%; height:130px; background:url(//{{ IMG_DOMAIN }}/{{chart.id}}/{{chart.getHash}}/plain.png) top left no-repeat;background-size:cover"></div>

                        <h3 contenteditable spellcheck="false">
                            {% if chart.title != '' %}{{ chart.title | replace({'<br/>': ' - '}) | striptags | raw }}{% else %}{{ chart.id }}{% endif %}
                        </h3>
                    </a>

                    <div class="dw-checkbox"><i class="im im-check-mark"></i></div>

                    <div class="btn-group">
                        <button class="btn dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="edit" target="_blank" href="/chart/{{ chart.id }}/visualize#refine-the-chart"><i class="im im-edit"></i> {% trans "Edit" %}</a></li>
                            <li><a class="duplicate" href="#"><i class="im im-copy"></i> {% trans "Duplicate" %}</a></li>
                            <li><a class="delete" href="#"><i class="im im-trash-can"></i> {% trans "Delete" %}</a></li>
                        <!-- dropdown menu links -->
                        </ul>
                    </div>
                 </div>
            </li>
            {% endfor %}

        </ul>

    {% endfor %}

{{ block('pagination') }}

{% if not title is defined %}
        <script type="text/javascript">
            cft.updateCharts({{ charts | json | raw }});
        </script>
{% endif %}
